﻿<template>
  <div class="container" style="width:99%;margin-top:35px;">
    <div class="month-year">
        {{dateMonthYear}}
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('新增营销提示')"
        type="primary"
        perms="MarketingManage:MarketingCalendar:addTips"
        @click="handleNewADD"
      ></kt-button>
    </div>
    <!--表格内容栏-->
    <div class="btns">
      <Crm-table
        class="table-width"
        MarketingCalendarFile
        width="400"
        permsEdit="MarketingManage:MarketingCalendarFile:edit"
        permsDelete="MarketingManage:MarketingCalendarFile:delet"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
        @handleEdit="handleEdit"
        @handleDeleteDic="handleDeleteDic"
        :showBatchDelete="false"
      ></Crm-table>
    </div>
    <!--新增界面-->
    <el-dialog
      :title="operation?'新增月度营销日历':'编辑月度营销日历'"
      class="query-box calendarPop"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="addBox" ref="addBox">
        <el-row>
          <div class="depart-box">
            <div class="slect-title">日期</div>
              <el-date-picker
                v-model="addBox.marketingDate"
                type="date"
                value-format="yyyy-MM-dd HH:ss:mm"
                format="yyyy-MM-dd HH:ss:mm"
                :picker-options="pickerOptions"
                placeholder="请选择">
              </el-date-picker>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <div class="slect-title">类型</div>
              <el-select clearable filterable v-model="addBox.marketingType" filterable>
                <el-option
                  v-for="item in marketing_type_options"
                  :key="item.key"
                  :label="item.value"
                  :time-arrow-control='false'
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <el-input
                type="textarea"
                style="heigth:39px;"
                v-model="addBox.contents"
                placeholder="请输入内容"
                @input="dd"
              ></el-input>
            </div>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="dialogVisible = false"
          >{{ $t("action.cancel") }}</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitAdd"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";

import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "MarketingCalendarFile",
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      size: "mini",
      editLoading: false,
      queryBox: {},
      addBox: {
        marketingDate:'',
        marketingType:'',
        content:'',
        contents:'',
        calendarId:this.$route.query.calendarId
      },
      assignDate:'',
      mytime: "",
      dialogVisible: false, // 新增界面是否显示
      operation: true, // true:新增, false:编辑
      width: 200,
      columns: [
        { type: "index", label: "序号", width: 110 },
        { prop: "marketingDateStr", label: "日期", minWidth: 80 },
        { prop: "marketingTypeStr", label: "类型", minWidth: 80 },
        { prop: "content", label: "标题/内容", minWidth: 150 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
      },
      dateMonthYear:this.$route.query.date,
      // 限制跟进时间
      pickerOptions: {
        // disabledDate(time) {
        //   let now = new Date();
        //   let nowMonth = now.getMonth(); //当前月 
        //   let nowYear = now.getFullYear(); //当前年 
        //   //本月的开始时间
        //   let monthStartDate = new Date(nowYear, nowMonth, 1); 
        //   //本月的结束时间
        //   let monthEndDate = new Date(nowYear, nowMonth+1, 0);
        //   let timeEnd=Date.parse(monthEndDate);//s
        //     return time.getTime() < Date.now()- 8.64e7 || time > timeEnd
        //   },
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      loading: false, // 加载标识
      
      marketing_type_options:[]

    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    get_dataTime() {
      let dateTime = new Date();
      let mytime = dateTime.toLocaleTimeString("chinese", { hour12: false }); //获取当前时间
      this.mytime = mytime;
      if(this.marketing_type_options.length==0){
        this.$api.user.optionsList({codeType: "calendar_type"}).then(res=>{
          this.marketing_type_options=res.keyValueList
          localStorage.setItem("calendarType",JSON.stringify(res.keyValueList))
        })
      }else{
        this.marketing_type_options=JSON.parse(localStorage.getItem('calendarType'))
      }
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {                                        
            this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.calendarId=this.$route.query.calendarId
      this.$api.agent
        .calendarContentContentConfigList(this.queryBox)
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else {
            let contents = {
              content: res.data,
              totalSize: res.total
            };
            this.pageResult = contents;
            console.log(this.pageResult)
            this.pageResult.content.forEach(item => {
              item.marketingDateStr=/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.marketingDate)
              this.marketing_type_options.forEach(mktypeItem=>{
                if(item.marketingType==mktypeItem.key){
                  item.marketingTypeStr=mktypeItem.value
                }
              })
            });
            this.loading = false;
          }
        })
        .then(data != null ? data.callback : "");
    },
    DateMinus(date1, date2) {
      //date1:小日期   date2:大日期
      var sdate = new Date(date1);
      var now = new Date(date2);
      var days = now.getTime() - sdate.getTime();
      var day = parseInt(days / (1000 * 60 * 60 * 24));
      return day;
    },
    // 重置
    reset(queryBox) {
      this.queryBox.activityCode = "";
      this.queryBox.activityName = "";
      this.findPage(null);
    },
    handleNewADD() {
      this.addBox= {
        marketingDate:'',
        marketingType:'',
        content:'',
        contents:'',
        calendarId:this.$route.query.calendarId
      },
      this.dialogVisible = true;
      this.operation = true
    },
    // 删除
    handleDeleteDic(params){
      this.$confirm('确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
        this.$api.agent.deleteCalendarTips({id:params.row.id}).then(res=>{
          if(res.result==1){
            this.$message({ message: res.msg, type: "success" });
            this.findPage(null)
          }else{
            this.$message({ message: res.msg, type: "error" });
            this.findPage(null)
          }
        })
      })
    },
    // 编辑
    handleEdit(params){
      this.dialogVisible = true
      this.operation = false
      this.addBox={
        marketingDate:params.row.marketingDate,
        marketingType:params.row.marketingType,
        contents:params.row.content,
        id:params.row.id,
        calendarId:params.row.calendarId,
        createDate:params.row.createDate,
        creater:params.row.creater,
        marketingDateStr:params.row.marketingDateStr,
        marketingTypeStr:params.row.marketingTypeStr,
      }
    },
    submitAdd() {
      this.editLoading = true;
      this.addBox.content=this.addBox.contents
      this.addBox.contents=""
      let params = Object.assign({}, this.addBox);
      let routeDate=this.dateMonthYear.split('-')
      let routeDateMonth=routeDate[1]
      let routeDateYear=routeDate[0]
      //上一级传过来的月份的开始时间
      let monthStartDate = new Date(routeDateYear, routeDateMonth-1)
      //上一级传过来的月份结束时间
      let monthEndDate = new Date(routeDateYear, routeDateMonth, 0)
      // 选择的时间
      let selectDate=new Date(this.addBox.marketingDate)
      if(selectDate<monthStartDate){
        this.$message({ message: "请选择当月的时间区间！", type: "error" });
        this.editLoading = false
        return false
      }
      if(monthStartDate<=selectDate&&selectDate<=monthEndDate){
         this.$api.agent.addOrUpdateCalendarTips(this.addBox).then(res => {
            this.editLoading = false;
            if (res.result ==1) {
              this.$message({ message: "操作成功", type: "success" });
              this.dialogVisible = false;
              this.$refs["addBox"].resetFields();
                this.addBox={
                  marketingDate:'',
                  marketingType:'',
                  content:'',
                  calendarId:this.$route.query.calendarId
                }
            } else {
              this.$message({ message: "操作失败, " + res.msg, type: "error" });
            }
            this.findPage(null);
          });
      }else if(selectDate>monthEndDate){
        this.$message({ message: "请选择当月的时间区间！", type: "error" });
        this.editLoading = false
        return false
      }
    },
    dd(el){
      console.log(this.addBox)
    }
  },
  mounted() {
    this.get_dataTime();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.month-year{
  text-align: left;
  // font-weight: bold;
  font-size: 30px;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.btn .el-button {
  padding: 9px 5px !important;
}
.calendarPop{
  .el-input, .el-select{
    width: 100%;
  }
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
</style>
